<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="en" ng-app="">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="viewport" content="width=400, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    
    <title>ECollaboration-Login</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet" />
    <!--<link href="res/css/bootstrap-theme.min.css" rel="stylesheet" />-->
    <link th:href="@{css/font-awesome.min.css}" rel="stylesheet" />
    <link th:href="@{css/style.css}" rel="stylesheet" />
    <link th:href="@{css/card.css}" rel="stylesheet" />
    <link th:href="@{css/checkbox.css}" rel="stylesheet" />
    <link th:href="@{http://fonts.googleapis.com/css?family=Open+Sans:400,300}" rel='stylesheet' type='text/css' />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="container">
        <div class="row text-center">
            <div class="banner">
                <h1>Ecollaboration. All in one platform</h1>
            </div>
        </div>
        <div class="card light-grey sign-in-card">
            <form class="form-signin" role="form">
                <div class="profile-img">
                    <i class="fa fa-user fa-5x"></i> 
                </div>
                <input type="text" class="form-control" placeholder="Username" spellcheck="false"/>
                <input type="password" class="form-control" placeholder="Password"/>
                <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                <div class="checkbox">
                    <div class="pull-left" data-popover="true" data-html="true" data-content="Only keep logged in the devices you trust. It's not recommended to use in any public devices. &lt;a href='javascript:void(0);'&gt;Know more&lt;/a&gt;">
                        <!--<input id="chbx1" type="checkbox" value="remember-me" />-->
                        <div class="cbxinit cbx cbx-def">
                            <input id="cbx1" type="checkbox" class="cbxinit cbx-in" value="remember-me"/>
                        </div>
                        <label for="cbx1" class="cbxinit cbx-label">Keep me logged in</label>
                    </div>
                    <div class="pull-right">
                        <a href="javascript:void(0);">Help me</a>
                    </div>
                </div>
            </form>
        </div>
        <div class="row text-center mgbtm30">
            <a href="javascript:void(0);">Create account</a>
        </div>
        <div class="row text-center mgbtm15">
            Powered by ECollaboration, Enterprise Collaboration Software.
        </div>
        <div class="row text-center">
            <a class="btmlink" href="javascript:void(0);">Report a bug</a>
            <a class="btmlink" href="javascript:void(0);">Latest news</a>
            <a class="btmlink" href="javascript:void(0);">Request feature</a>
            <a class="btmlink" href="javascript:void(0);">Privacy &amp; Terms</a>
            <a class="btmlink" href="javascript:void(0);">Help</a>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script type="text/javascript" th:src="@{js/jquery-2.1.1.min.js}"></script>
    <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{js/angular.min.js}"></script>        
    <script type="text/javascript" th:src="@{js/checkbox.js}"></script>
    <script type="text/javascript" th:src="@{js/login.js}"></script>
</body>

</html>
